<!-- @selection-change="handleSelectionChange" -->
<!-- @select="handleSelectionChange" -->
<template>
  <el-table
    class="table-cont"
    ref="tableContRef"
    :data="tableData"
    :header-cell-style="{ backgroundColor: '#F2F3F5' }"
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowClassName"
    :row-style="rowStyle"
    tooltip-effect="light"
  >
    <!-- 是否显示多选或者多选 -->
    <el-table-column
      v-if="showSelectColumn || showRadioColumn"
      type="selection"
      align="center"
    ></el-table-column>
    <!-- 是否显示序号 -->
    <el-table-column
      v-if="showIndexColumn"
      type="index"
      label="序号"
      align="center"
    ></el-table-column>
    <template v-for="propItem in propList" :key="propItem.id">
      <el-table-column
        v-bind="propItem"
        :show-overflow-tooltip="propItem.showOverflowTooltip"
        align="center"
      >
        <!-- 什么都不写，默认插槽 -->
        <template #default="scope">
          <slot :name="propItem.slotName" :row="scope.row">{{ scope.row[propItem.prop] }}</slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <div class="footer flx-justify-between">
    <el-pagination
      v-if="pagination.isShow"
      :current-page="page.currentPage"
      :page-size="page.pageSizes"
      :page-sizes="[10, 20, 30, 40]"
      :small="true"
      :layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
      :total="tableTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div class="retain" v-if="isRetainNum">
      <span>可保留客户数：</span> <span>23</span><span>个</span>
    </div>
  </div>
</template>

<script setup lang="ts" name="TableCont">
import { Customer } from '@/api/types/modules/customer'
import { Pagination } from '../types'

const tableContRef = ref()

interface pageInfo {
  currentPage: number
  pageSizes: number
}

// 定义 props 数据类型
const props = defineProps<{
  tableData: Customer.ColumnItem[]
  propList: any[]
  showIndexColumn: boolean
  showSelectColumn: boolean
  showRadioColumn: boolean
  tableTotal: number
  page: pageInfo
  pagination: Pagination
  isRetainNum: boolean
  isCornerMark: boolean
  rowStyle: any
}>()
console.log('props', props)

// 定义抛出事件
const emit = defineEmits(['selectionChange', 'update:page'])

// 监听 handleSizeChange
const handleSizeChange = (pageSizes: number) => {
  emit('update:page', { ...props.page, pageSizes })
  console.log('pageSizes', pageSizes)
}

// 监听 handleCurrentChange
const handleCurrentChange = (currentPage: number) => {
  emit('update:page', { ...props.page, currentPage })
  console.log('current', currentPage)
}

// 监听选中
const handleSelectionChange = (selection: Customer.ColumnItem[]) => {
  //   判断是否为单选
  if (props.showRadioColumn) {
    if (selection.length > 1) {
      let delRow: Customer.ColumnItem = selection.shift()
      // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
      tableContRef.value.toggleRowSelection(delRow, false)
    }
  }
  let ids: string[] = []
  selection.forEach((item) => {
    ids.push(item.id)
  })
  /**
   * 抛出选择后的事件
   * selection： 选择的数据数组
   * ids：选择数据 id 数组
   */
  emit('selectionChange', selection, ids)
}

// 添加角标 根据数据不同返回不同的类名
const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
  console.log('row', row)
  if (props.isCornerMark) {
    if (rowIndex === 0) {
      return 'danger-row'
    } else if (rowIndex === 1) {
      return 'success-row'
    } else if (rowIndex === 2) {
      return 'primary-row'
    } else if (rowIndex === 3) {
      return 'warning-row'
    }
  }
  return ''
}
</script>

<style scoped lang="scss">
.table-cont {
  :deep(.el-table-column--selection.is-leaf .el-checkbox) {
    display: none;
  }
  :deep(.cell) {
    line-height: 1.4;
    font-size: 12px;
    padding: 0 10px;
    color: #545454;
  }
  :deep(.danger-row) {
    .el-table__cell:first-child {
      overflow: hidden;
      &::before {
        position: absolute;
        left: -29px;
        top: 6px;
        width: 90px;
        content: '即将到期';
        color: #fff;
        z-index: 3;
        font-size: 12px;
        background-color: #fa5151;
        text-align: center;
        transform: rotate(-45deg) scale(0.7);
      }
    }
  }
  :deep(.success-row) {
    .el-table__cell:first-child {
      overflow: hidden;
      &::before {
        position: absolute;
        left: -29px;
        top: 6px;
        width: 90px;
        content: '广交会';
        color: #fff;
        z-index: 3;
        font-size: 12px;
        background-color: #6de4bc;
        text-align: center;
        transform: rotate(-45deg) scale(0.7);
      }
    }
  }
  :deep(.primary-row) {
    .el-table__cell:first-child {
      overflow: hidden;
      &::before {
        position: absolute;
        left: -29px;
        top: 6px;
        width: 90px;
        content: '中国出口';
        color: #fff;
        z-index: 3;
        font-size: 12px;
        background-color: #7ec9ff;
        text-align: center;
        transform: rotate(-45deg) scale(0.7);
      }
    }
  }
  :deep(.warning-row) {
    .el-table__cell:first-child {
      overflow: hidden;
      &::before {
        position: absolute;
        left: -29px;
        top: 6px;
        width: 90px;
        content: '释放临时';
        color: #fff;
        z-index: 3;
        font-size: 12px;
        background-color: #faad14;
        text-align: center;
        transform: rotate(-45deg) scale(0.7);
      }
    }
  }
}
</style>
